<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <style>
            #div1{
                width:100px;
                height:100px;
                background-color: red;
                position: relative;
                margin: 100px;
            }
            #div2{
                width:200px;
                height: 200px;
                position: absolute;
                background-color: blue;
                left:400px;
                top:300px;
            }
        </style>
    </head>
    <body>
        <div id='div1'></div>
        <div id='div2'></div>
        <script>
            var div1 = document.getElementById('div1');
            var _newele = document.createElement('div');
            var div1Style = getComputedStyle(div1);
            var div2Style = getComputedStyle(document.getElementById('div2'));
            var dragFlag = 0, dropFlag = 0;
            div1.addEventListener('mousedown', (event)=>{
                var _ele = event.target;
                _newele.style.width = div1Style.width;
                _newele.style.height = div1Style.height;
                _newele.style.backgroundColor = div1Style.backgroundColor;
                _newele.style.position = 'absolute';
                _newele.style.left = _ele.offsetLeft + 'px';
                _newele.style.top = _ele.offsetTop + 'px';
                document.body.append(_newele);
                _ele.style.position = 'absolute';
                _ele.style.left = _newele.offsetLeft + 'px';
                _ele.style.top = _newele.offsetTop + 'px';
                _ele.style.zIndex = 1; 
                _ele.style.opacity = 0.5;
                dragFlag = 1;
            });
            // document.getElementById('div1').addEventListener('mousemove', (event) => {
            //     var _ele = event.target;
            //     if(dragFlag) {
            //         _ele.style.left = event.clientX - parseInt(div1Style.width)/2 + 'px';
            //         _ele.style.top = event.clientY - parseInt(div1Style.height)/2 + 'px';
            //         if (isMouseenter({x:event.clientX,y:event.clientY})){
            //             dropFlag = 1;
            //             div1.style.cursor = 'copy'
            //         } else {
            //             dropFlag = 0;
            //             div1.style.cursor = 'move'
            //         }
            //     } else {
            //         return
            //     }               
            // })
            
            div1.addEventListener('mousemove',(event) => {
                if(!dragFlag) return false;
                var _ele = event.target
                _ele.style.left = event.clientX  - parseInt(div1Style.width)/2 + 'px' // clientx是当前鼠标相对于浏览器页面的水平坐标，这里减去width/2是估算方式，因为鼠标拖动方块在方块之内，按照鼠标在方块中心计算
                _ele.style.top = event.clientY - parseInt(div1Style.height)/2 + 'px'
                if(isMouseenter({left: event.clientX, top: event.clientY}, div2)){
                    dropFlag = 1
                    div1.style.cursor = 'copy'
                } else{
                    dropFlag = 0
                    div1.style.cursor = 'move'
                }
            })
            div1.addEventListener('mouseup', (event) => {
                dragFlag = 0
                console.log(dropFlag)
                // 恢复原样，简易版就直接干掉div1，否则应该存储所有的style值，干掉new div,让div1回归原位
                if(!dropFlag){
                    document.body.removeChild(div1)
                } else {
                    console.log('now drop in div2')
                    div2.style.backgroundColor = '#ccc000'
                }
            })
            
            // document.getElementById('div1').addEventListener('mouseup', (event)=>{
            //     if(dropFlag){
            //         div2Style.backgroundColor = '#ccc000'
            //         document.body.removeChild(_newele)
            //     } else {
            //         document.body.removeChild(div1)
            //     }
            // })
            function isMouseenter(point,ele){
                var minLeft = ele.offsetLeft, maxLeft = ele.offsetLeft + ele.offsetWidth
                var minTop = ele.offsetTop, maxTop = ele.offsetTop + ele.offsetHeight
                if( point.left > minLeft && point.left < maxLeft && point.top > minTop && point.top < maxTop){
                    //console.log('enter', ele)
                    return true
                }  
                return false
            }
        </script>
    </body>
</html>